<template>
  <!--编写html标签的地方-->
  <div class="content">
    <van-row>
      <van-col span="3">
        <van-icon name="bars" size="30px" style="margin-top: 10px; margin-left: 10px; font-weight: 800;"
          color="#020202" />
      </van-col>
      <van-col span="18">
        <van-search v-model="keyworld" shape="round" background="#f2f2f2" placeholder="请输入搜索关键词" @search="onSearch" />

      </van-col>
      <van-col span="3">
        <van-icon name="friends" size="30px" style="margin-top: 10px; margin-left: 10px;" />
      </van-col>
    </van-row>
    <!--轮播图-->
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="item in productImg" :key="item">
        <img :src="item" width="100%" height="260px" />
      </van-swipe-item>
    </van-swipe>
    <!--快捷入口-->
    <div class="icons">
      <van-grid :column-num="5" icon-size="35px" :border="false">
        <van-grid-item v-for="item in icondata" :key="item" :icon="item.img" :text="item.text" />
      </van-grid>
    </div>

    <div class="prolist">
      <van-grid :column-num="2" :gutter="10" style="padding-bottom: 60px;">
        <van-grid-item v-for="item in productData" :key="item.id" :to="({path:'/moveDetail',query:{id : item.id}})">

          <img
            v-bind:src="item.imgurl" alt="" width="100%">
          <span class="title"><van-icon name="new-arrival" color="red" size="27px" />{{ item.pname }}</span>
          <div style="color: red; width: 100%; margin-top: 8px;">￥<strong style="font-size: 20px; font-weight: 700;">{{item.newprice}}</strong>.00
          </div>
          <div style="width: 100%; line-height: 26px; margin-top: 2px;">
            <van-row>
              <van-col span="16">
                <span style="color: darkgrey;">2万+条评论</span>
              </van-col>
             
              <van-col span="8">
                <div style="width: 76%; height: 24px; background-color: #d6d3d3; border-radius: 14px; font-size: 12px; text-align: center;">
                    看相似
                </div>
              </van-col>
            </van-row>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
  </div>

  <!--v-model 指令 是用来做双向数据绑定  页面发生改变 数据发生改变  数据发生改变 页面发生改变-->
  <van-tabbar v-model="active">
    <van-tabbar-item icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item icon="search" url="https://minicaty-pro.pf.jd.com/index.html?swbr=1">分类</van-tabbar-item>
    <van-tabbar-item icon="friends-o">购物车</van-tabbar-item>
    <van-tabbar-item icon="setting-o" url="https://chat.deepseek.com/">个人中心</van-tabbar-item>
  </van-tabbar>

</template>
<script setup>
// setup 是vue3 中的 组合api
// 编写js代码的 函数 变量 常量
// ref 当页面变量 需要动态改变的时候 需要使用ref 响应式处理
import { ref } from 'vue';
import request from '../utils/request';
const active = ref(0);

const keyworld = ref('')
const productData = ref()

const onSearch = () => {
  console.log(keyworld.value);
}

//轮播数据
const productImg = ref([
  "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5c3aa889e70366536779a61ff5623e63.jpg",
  "https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/301502/4/17553/76324/685d141aFa3fcc75b/c539713bd2fe440d.jpg",
  "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9d052f0d0f381bb91e6bdd1ae769a46a.jpg"
])

const icondata = ref([
  { text: 'plus会员', img: 'https://img14.360buyimg.com/babel/jfs/t20270715/243181/3/13649/9018/6694ee5fF6aa391d4/1b020aa3f9cf89a0.png' },
  { text: '充值中心', img: '//img20.360buyimg.com/babel/jfs/t20270715/44839/8/24550/7935/6694ee27F8775a577/b63c6a2fa0327964.png' },
  { text: '京东超市', img: 'https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png' },
  { text: '华杉电器', img: 'https://m.360buyimg.com/babel/jfs/t20270715/237082/37/21845/7616/6694edddFc764124a/38d00b686257b0f4.png' },
  { text: '服装美妆', img: 'https://img20.360buyimg.com/babel/jfs/t20270715/36751/25/21385/7651/6694ee02F878cddef/13ce837dd39ad1ad.png' },
])


const callProductApi = async ()=>{
   await request.get('product/testproduct').then((res)=>{
        console.log(res.data);
        const imgurl=res.data.data.map(item => item.imgurl)
        console.log(imgurl);
        productImg.value= imgurl
        productData.value = res.data.data

    })
    // await request.post('product/search').then((res)=>{
    //     console.log(res);
        
    // })
}

callProductApi()
</script>
<style scoped>
/*
css样式
*/
.content {
  /* height: 100vh; */
  background-color: #f2f2f2;
}

.icons {
  width: 98%;
  height: 100px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 13px;
}

:deep(.van-grid-item__content) {
  border-radius: 13px;
}

.prolist {
  margin-top: 10px;
  font-size: 14px;

  .title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
}
</style>
